<template>
  <div>
    <el-card style="margin-bottom: 1.5em; min-width: 20em">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in timeLineItems" :key="index">
          <article-button :data="item"></article-button>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1"
      class="hidden-sm-and-down"
    ></el-pagination>
    <button class="button hidden-md-and-up" v-if="curPage === 1" style="">
      下一页
    </button>
    <div
      v-if="curPage > 1 && curPage < totalSize"
      style="display: flex; justify-content: space-between"
    >
      <button class="button hidden-md-and-up" style="width: 49%">上一页</button>
      <button class="button hidden-md-and-up" style="width: 49%">下一页</button>
    </div>
    <button
      class="button hidden-md-and-up"
      v-if="curPage === totalSize"
      style=""
    >
      上一页
    </button>
  </div>
</template>
<script>
import ArticleButton from "./ArticleButton.vue";
export default {
  components: {
    ArticleButton,
  },
  data() {
    return {
      timeLineItems: [
        {
          title: {
            content: "title",
            link: "",
          },
          classify: {
            content: "sss",
            link: "",
          },
          date: "2020-01-07",
          imgSrc: "",
        },
        {
          title: {
            content: "title",
            link: "",
          },
          classify: {
            content: "sss",
            link: "",
          },
          date: "2020-01-07",
          imgSrc: "",
        },
        {
          title: {
            content: "title",
            link: "",
          },
          classify: {
            content: "sss",
            link: "",
          },
          date: "2020-01-07",
          imgSrc: "",
        },
        {
          title: {
            content: "title",
            link: "",
          },
          classify: {
            content: "sss",
            link: "",
          },
          date: "2020-01-07",
          imgSrc: "",
        },
      ],
      totalSize: 8,
      curPage: 1
    };
  },
  methods: {},
};
</script>
<style scoped>
</style>